<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="module">
    // import {
    //     createRenderer,
    //     render,
    //     Fragment,
    //     h
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
    // import {
    //     createRenderer,
    //     render,
    //     h
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js'
    import {
        // renderOptions,
        h,
        render,
        Fragment,
        Text
    } from "./runtime-dom.js"

    const renderComponent = {
        props: {
            address: String
        },
        render(proxy) {
            return h('div', proxy.address)
        }
    }

    // 组件更新有三种情况
    // 1. 组件的属性发生变化
    // 2. 组件的data发生变化
    // 3. 组件的插槽发生变化
    const vueComponent = {
        data() {
            return {
                flag: true,
                address: '北京'

            }
        },
        render(proxy) {
            return h(Fragment, [
                h('button', { onClick: () => { proxy.flag = !proxy.flag } }, 'flag'),
                h(renderComponent, { address: proxy.flag ? '北京' : '上海' })
            ])
        }

    }
    render(h(vueComponent, {}), document.body)

</script>

</html>